@use '@material/fab' as mdc-fab;
@use '../mdc-helpers/mdc-helpers';
@use '_button-base';

@include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);

.mat-mdc-fab, .mat-mdc-mini-fab {
  @include button-base.mat-private-button-interactive();
  @include button-base.mat-private-button-disabled();

  // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
  // styles and don't actually do anything. This undoes those conflicting styles.
  &:not(.mdc-ripple-upgraded):focus::before {
    background: transparent;
    opacity: 1;
  }

  // MDC expects the fab icon to contain this HTML content:
  // ```html
  //   <span class="mdc-fab__icon material-icons">favorite</span>
  // ```
  // However, Angular Material expects a `mat-icon` instead. The following
  // mixin will style the icons appropriately.
  // stylelint-disable-next-line selector-class-pattern
  .mat-icon, .material-icons {
    @include mdc-fab.icon_();
  }
}

.mat-mdc-extended-fab {
  @include mdc-fab.extended_();

  // stylelint-disable-next-line selector-class-pattern
  .mat-icon, .material-icons {
    @include mdc-fab.extended-icon-padding(
      mdc-fab.$extended-icon-padding,
      mdc-fab.$extended-label-padding
    );
  }

  // For Extended FAB with text label followed by icon.
  // We are checking for the a button class because white this is a FAB it
  // uses the same template as button.
  // stylelint-disable-next-line selector-class-pattern
  .mdc-button__label + .mat-icon, .mdc-button__label + .material-icons {
    @include mdc-fab.extended-icon-padding(
      mdc-fab.$extended-icon-padding,
      mdc-fab.$extended-label-padding,
      $is-icon-at-end: true
    );
  }
}
